<template>
  <div>
    <h2>HOME</h2>
    <!-- 动态路由-params传参 -->
    <div>
      <!--参数值会被设置到 this.$route.params 在组件中可以通过this.$route.params获取 -->
      <router-link to="/home/music/1/3">华语music</router-link>
      <!--路由导航中to的对象写法  注：传递params参数时，to的对象写法只能用name，不能用path！！-->
      <!-- 注：传递params参数时，参数的值千万不能是空字符串！！！否则只能跳转一次，以后就废了 可以用undefined -->
      <router-link
        :to="{ name: 'music', params: { id: '2', times: undefined } }"
        >粤语music</router-link
      >
    </div>
    <div>
      <!-- 跳转并携带query参数（to的字符串写法） -->
      <router-link to="/home/news?name=穿越火线&time=2007">游戏1</router-link>
      <!-- 跳转并携带query参数（to的对象写法） -->
      <router-link
        :to="{ name: 'news', query: { name: '英雄联盟', time: '2012' } }"
        >游戏2</router-link
      >
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style></style>
